<template>
  <div class="head">
    <i class="iconfont icon-fanhui" @click="back"></i>
    <span>行程详情</span>
    <i class="iconfont icon-fenxiang"></i>
  </div>
  <div class="box"></div>
  <div class="detail">
    <div class="map">

    </div>
    <div class="time">
      <div class="day">
        <i class="iconfont icon-calendar-v2-full"></i>
        <div>总天数</div>
        <span>3 天</span>
      </div>
      <div class="scenery">
        <i class="iconfont icon-icons_pin"></i>
        <div>景点数</div>
        <span>8 个</span>
      </div>
      <div class="hour">
        <i class="iconfont icon-shijian"></i>
        <div>游览时间</div>
        <span>20 小时</span>
      </div>
    </div>
    <div class="days">
      <van-button :class="{ 'active': i === 1 }" class="btn" v-for="i in 3" :key="i">第 {{ i }} 天</van-button>
    </div>
    <div class="day-list" v-for="i in 3" :key="i">
      <div class="day-list-head">
        <span class="scenic_name">西湖景区</span>
        <span class="now_time">09:00 - 12:00</span>
      </div>
      <div class="day-list-play-time">
        <span>游览时间：约 3 小时</span>
      </div>
      <div class="day-list-detail">
        <span>
          西湖景区包含断桥残雪、平湖秋月等著名景点，建议从北山街开始游览。
        </span>
      </div>
      <div class="day-list-time">
        <div class="type_time">
          <i class="iconfont icon-buxing"></i>
          <span>步行 10 分钟</span>
        </div>
        <div class="like_guide">
          <div class="like" @click="addLike">
            <i :class="`${flag ? 'active': ''} iconfont ${flag ? 'icon-xihuan2' : 'icon-xihuan3'}`"></i>
          </div>
          <div class="guide">
            <i class="iconfont icon-daohang"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const flag = ref(0)

const addLike = () => {
  flag.value = !flag.value
  console.log(flag.value);
}

const router = useRouter()
const back = () => {
  router.back()
}
</script>

<style lang="less" scoped>
.head{
  z-index: 99;
  position: fixed;
  top: 0;
  height: 1.5rem;
  width: 100%;
  padding: 0.37rem 0.8rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
  span{
    display: inline-block;
    font-weight: 600;
    font-size: 0.48rem;
    color: #000000;
  }
  i{
    font-weight: 900;
    color: #374151;
  }
}
.box{
  height: 1.5rem;
}
.detail{
  height: calc(100vh - 3rem);
  overflow-y: scroll;
  .map{
    height: 5.5rem;
    width: 100%;
    background-color: #374151;
  }
  .time{
    border: 1px solid #E5E7EB;
    padding: 0.35rem 0.43rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    i{
      color: #3176FF;
      margin-right: 0.15rem;
    }
    .day{
      display: flex;
      align-items: center;
      div{
        margin-right: 0.1rem;
        font-weight: 400;
        font-size: 0.37rem;
        color: #4B5563;
      }
      span{
        font-weight: 500;
        font-size: 0.37rem;
        color: #000000;
        line-height: 0.56rem;
      }
    }
    .scenery{
      display: flex;
      align-items: center;
      div{
        margin-right: 0.1rem;
        font-weight: 400;
        font-size: 0.37rem;
        color: #4B5563;
      }
      span{
        font-weight: 500;
        font-size: 0.37rem;
        color: #000000;
        line-height: 0.56rem;
      }
    }
    .hour{
      display: flex;
      align-items: center;
      div{
        margin-right: 0.1rem;
        font-weight: 400;
        font-size: 0.37rem;
        color: #4B5563;
      }
      span{
        font-weight: 500;
        font-size: 0.37rem;
        color: #000000;
        line-height: 0.56rem;
      }
    }
  }
  .days{
    display: flex;
    overflow-x: auto;
    padding: 0.32rem 0.43rem;
    .btn{
      border-radius: 0.3rem;
      margin-right: 0.21rem;
      flex: 0 0 auto;
      background-color: #F3F4F6;
      color: #4B5563;
      font-weight: 400;
    }
    .active{
      color: #fff;
      background-color: #3176FF;
    }
  }
  .day-list{
    margin: 0 0.43rem;
    padding: 0.43rem;
    box-sizing: border-box;
    margin-bottom: 0.43rem;
    box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.1);
    border-radius: 0.43rem;
    &-head{
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      .scenic_name{
        font-weight: 600;
        font-size: 0.48rem;
        color: #000000;
        line-height: 28px;
      }
      .now_time{
        display: inline-block;
        background-color: #cfe2fc;
        padding: 4px 8px;
        border-radius: 100px;
        color: #3176FF;
        font-weight: 400;
        font-size: 0.37rem;
      }
    }
    &-play-time{
      margin-top: 4px;
      font-weight: 400;
      font-size: 0.37rem;
      color: #6B7280;
      line-height: 0.53rem;
    }
    &-detail{
      margin-top: 8px;
      font-weight: 400;
      font-size: 0.37rem;
      color: #4B5563;
      line-height: 0.53rem;
    }
    &-time{
      margin-top: 0.32rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .type_time{
        font-weight: 400;
        font-size: 0.37rem;
        color: #6B7280;
        line-height: 20px;
      }
      .like_guide{
        display: flex;
        div{
          padding: 0.27rem;
          font-size: 0.37rem;
          border-radius: 8px;
        }
        .like{
          background-color: #e6e7e7b6;
          margin-right: 0.21rem;
          .iconfont{
            color: #6B7280;
          }
          .active{
            color: red;
          }
        }
        .guide{
          background-color: #3176FF;
          .iconfont{
            color: #fff;
          }
        }
      }
    }
  }
}

</style>